<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js文件/axios.min.js"></script>
    <script src="../js文件/api.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .banner {
      margin: 200px 700px;
      width: 480px;
      height: 522px;
    }
    .top {
      width: 480px;
      height: 200px;
    }
    .top p {
      font-size: 46px;
      font-weight: 900px;
      text-align: center;
      line-height: 200px;
    }
    .mid {
      width: 480px;
      height: 250px;
    }
    .int1,
    .int2,
    .int3{
      width: 478px;
      height: 52px;
      margin-top: 40px;
    }
    .int3{
       background: #3487ff;
    }
    .but{
      margin-left: 160px;
      margin-top: 20px;
      background: none;
      border: none;
    }
  </style>
  <body>
    <div class="banner">
      <div class="top">
        <p>欢迎登录QQ</p>
      </div>
      <div class="mid">
        <input type="text" class="int1" placeholder="昵称" />
        <input type="password" class="int2" placeholder="密码" />
        <input type="button" name="" id="" class="int3" value="登录" />
        <a href="cf注册页.html"><button class="but">还没有QQ？来注册一个吧！</button></a>
      </div>
      
      <script>
    let isUsername = false;
    let isPassword = false;
    let ipts = document.querySelectorAll(".mid input");

    ipts[0].onblur = function () {
      let reg = /^[a-z]\w{5,17}$/i;
      if (reg.test(this.value)) {
        isUsername = true;
      } else {
        isUsername = false;
      }
    };
    ipts[1].onblur = function () {
      let reg = /^\S{6,16}$/;
      if (reg.test(this.value)) {
        isPassword = true;
      } else {
        isPassword = false;
      }
    };
    ipts[2].onclick = function () {
      if (isUsername && isPassword) {
        let username = ipts[0].value;
        let password = ipts[1].value;
        axios
          .get(loginAPI, {
            params: { username, password },
          })
          .then((res) => {
            let { data } = res;
            console.log(data);
            alert(data.msg);
            if (data.code == 1) {
            localStorage.setItem("uid", data.data.id);
            localStorage.setItem("username", data.data.username);
            localStorage.setItem("token", data.data.token);
            location.href = "cf首页.html";
            }
          });
      }
    };
  </script>
  </body>
